const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const createStyleLoaders = require('./create-style-loader');

const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  mode: "development",
  entry: { app: "./src/main.js" },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].min.js",
  },
  resolve: {
    symlinks: false,
    extensions: [ '.js', '.jsx', '.vue', '.json' ]
  },
  module: {
    rules: [
      {
        test: /\.js(x)?$/,
        exclude: /node_modules/,
        use: [ 'cache-loader', 'babel-loader?cacheDirectory' ]
      },{
        test: /\.vue$/,
        exclude: /node_modules/,
        use: [ 'cache-loader', 'babel-loader?cacheDirectory', 'vtr-loader' ]
      },
      ...createStyleLoaders({
        extract: false,
        minimize: !isDev,
        sourceMap: isDev,
        postcss: true,
        cache: true
      })
    ]
  },
  devServer: {
    port: 9000,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "../index.html"),
    }),
  ],
};
